<!--
* @Author: zhangjing
* @Date: 2024-08-07 14:30:00
* @Description: 学生数量>
-->
<template>
	<v-chart :options="barOption" autoresize ref="chart" />
</template>

<script>
import echarts from 'echarts';
import ECharts from 'vue-echarts';
import 'echarts/lib/chart/bar';
import 'echarts/lib/chart/pictorialBar';
import 'echarts/lib/component/axis';
import 'echarts/lib/component/tooltip'; //这里需要引入，不然提示没效果
import { priceFormat } from '@/utils/base';
let data = [];
let color = ['#32856b', '#3c45ce', '#ca3b95', '#aaabae'];
export default {
	name: 'stuNumCount',
	components: {
		'v-chart': ECharts,
	},
	props: {
		info: {
			type: Array,
			default: () => [],
		},
		pageScale: {
			type: [String, Number],
			default: 1,
		},
	},

	data() {
		return {
			barOption: {
				color,
				grid: {
					top: '2%',
					bottom: -15,
					right: '0%',
					left: 0,
					containLabel: true,
				},
				xAxis: {
					show: false,
				},
				yAxis: [
					{
						triggerEvent: true,
						show: true,
						inverse: true,
						data: [],
						axisLine: {
							show: false,
						},
						splitLine: {
							show: false,
						},
						axisTick: {
							show: false,
						},
						axisLabel: {
							interval: 0,
							color: '#333',
							align: 'right',
							margin: 10,
							fontSize: 14,
						},
					},
					{
						triggerEvent: true,
						show: true,
						inverse: true,
						data: [],
						axisLine: {
							show: false,
						},
						splitLine: {
							show: false,
						},
						axisTick: {
							show: false,
						},
						axisLabel: {
							interval: 0,
							color: '#999',
							align: 'left',
							fontSize: 13,
							formatter: function (value, index) {
								return priceFormat(data[index] || 0) + '人';
							},
						},
					},
				],
				series: [
					{
						name: '条',
						type: 'bar',
						yAxisIndex: 0,
						data: [],
						barWidth: 20,
						itemStyle: {
							color: (val) => {
								return color[val.dataIndex];
							},
						},
					},
					{
						name: '外框',
						type: 'bar',
						barGap: '-100%', // 设置外框粗细
						data: [],
						barWidth: 20,
						itemStyle: {
							color: '#cfd4e4', // 填充色
						},
						z: 0,
					},
				],
			},
		};
	},
	watch: {
		info: {
			handler: function (newValue, oldValue) {
				let yAxis = [],
					total = 0;
				data = [];
				this.info.forEach((item) => {
					yAxis.push(item.name);
					data.push(item.value);
					total = total + item.value;
				});
				console.log('this.info', this.info);
				this.barOption.yAxis[0].data = yAxis;
				this.barOption.yAxis[1].data = yAxis;
				this.barOption.series[0].data = data;
				this.barOption.series[1].data = new Array(data.length).fill(total);
				this.barOption.yAxis[0].axisLabel.fontSize = 14 * this.pageScale;
				this.barOption.yAxis[1].axisLabel.fontSize = 13 * this.pageScale;
				console.log('this.barOption', this.barOption);
			},
			// 开启深度监听：只要obj中的任何一个属性发生改变，都会触发相应的代码
			deep: true,
			immediate: true, //初始化时让handler调用一下
		},
		pageScale(newValue, oldValue) {
			this.barOption.yAxis[0].axisLabel.fontSize = 14 * this.pageScale;
			this.barOption.yAxis[1].axisLabel.fontSize = 13 * this.pageScale;
			// 刷新图表的方法
			//this.$refs.chart.echartsInstance.setOption(this.barOption, true);
		},
	},

	methods: {},
};
</script>

<style scoped>
.echarts {
	width: 100%;
	height: 100%;
}
</style>
